<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS基本语法</title>
    <style>
        table{
            border-collapse: collapse;
        }
        table,td,th {
            border: 2px solid black;
        }
        th{
            color:white;
            background-color:lightgreen
        }

#customers
{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:40%;
	border-collapse:collapse;
}
#customers td, #customers th 
{
	font-size:1em;
	border:1px solid #98bf21;
	padding:3px 7px 2px 7px;
}
#customers th 
{
	font-size:1.1em;
	text-align:left;
	padding-top:5px;
	padding-bottom:4px;
	background-color:#A7C942;
	color:#ffffff;
}
#customers tr.alt td 
{
	color:#000000;
	background-color:#EAF2D3;
}

caption {caption-side:bottom;}
</style>
</head>

<body>
    <table>
        <caption>Table 1.1 Customers</caption>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
        </tr>
        <tr>
            <td>Peter</td>
            <td>Griffin</td>
        </tr>
        <tr>
            <td>Lois</td>
            <td>Griffin</td>
        </tr>
    </table>
    
    <hr/>
    <table id="customers">
            <tr>
              <th>Company</th>
              <th>Contact</th>
              <th>Country</th>
            </tr>
            <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
            </tr>
            <tr class="alt">
            <td>Berglunds snabbköp</td>
            <td>Christina Berglund</td>
            <td>Sweden</td>
            </tr>
            <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
            </tr>
            <tr class="alt">
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
            </tr>
            <tr>
            <td>Island Trading</td>
            <td>Helen Bennett</td>
            <td>UK</td>
            </tr>
            <tr class="alt">
            <td>Königlich Essen</td>
            <td>Philip Cramer</td>
            <td>Germany</td>
            </tr>
            </table>
</body>

</html>